<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web开发入门指南</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
        }
        
        /* 首字下沉效果 */
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #4f46e5;
            font-family: 'Noto Serif SC', serif;
        }
        
        /* 卡片悬停效果 */
        .hover-card {
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
        
        .hover-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            background: rgba(255, 255, 255, 0.95);
        }
        
        /* 渐变文字效果 */
        .gradient-text {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* 数字标记样式 */
        .number-badge {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            width: 2.5rem;
            height: 2.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            font-weight: 700;
            flex-shrink: 0;
        }
        
        /* 平滑滚动 */
        html {
            scroll-behavior: smooth;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 10px;
        }
        
        ::-webkit-scrollbar-track {
            background: #f1f1f1;
        }
        
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 5px;
        }
        
        /* 导航固定效果 */
        .sticky-nav {
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
        
        /* 图片遮罩效果 */
        .image-overlay {
            position: relative;
            overflow: hidden;
        }
        
        .image-overlay::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 100%);
            pointer-events: none;
        }
        
        /* Mermaid 图表样式 */
        .mermaid {
            display: flex;
            justify-content: center;
            margin: 2rem 0;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="sticky top-0 z-50 sticky-nav shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16 items-center">
                <div class="flex items-center space-x-2">
                    <i class="fas fa-code text-2xl gradient-text"></i>
                    <span class="text-xl font-bold gradient-text">Web开发指南</span>
                </div>
                <div class="hidden md:flex space-x-8">
                    <a href="#intro" class="text-gray-700 hover:text-purple-600 transition">简介</a>
                    <a href="#frontend" class="text-gray-700 hover:text-purple-600 transition">前端</a>
                    <a href="#backend" class="text-gray-700 hover:text-purple-600 transition">后端</a>
                    <a href="#database" class="text-gray-700 hover:text-purple-600 transition">数据库</a>
                    <a href="#workflow" class="text-gray-700 hover:text-purple-600 transition">工作流程</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero 区域 -->
    <section class="relative overflow-hidden">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
            <div class="text-center">
                <h1 class="text-5xl md:text-7xl font-bold mb-6">
                    <span class="gradient-text">探索Web开发的</span>
                    <br>
                    <span class="text-gray-800">无限可能</span>
                </h1>
                <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
                    从零开始，掌握现代Web开发的核心技术与最佳实践，
                    构建令人惊叹的互联网应用
                </p>
                <div class="flex justify-center space-x-4">
                    <button class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white px-8 py-3 rounded-full font-semibold hover:shadow-lg transition transform hover:scale-105">
                        <i class="fas fa-rocket mr-2"></i>开始学习
                    </button>
                    <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-50 transition">
                        <i class="fas fa-play-circle mr-2"></i>观看介绍
                    </button>
                </div>
            </div>
        </div>
        <!-- 装饰性背景元素 -->
        <div class="absolute top-0 right-0 -mt-20 -mr-20 w-80 h-80 bg-purple-200 rounded-full opacity-20 blur-3xl"></div>
        <div class="absolute bottom-0 left-0 -mb-20 -ml-20 w-80 h-80 bg-indigo-200 rounded-full opacity-20 blur-3xl"></div>
    </section>

    <!-- 学习目标 -->
    <section class="py-16 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-3xl font-bold text-center mb-12 gradient-text">学习目标</h2>
            <div class="grid md:grid-cols-3 gap-6">
                <div class="hover-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-start space-x-4">
                        <div class="bg-purple-100 p-3 rounded-lg">
                            <i class="fas fa-lightbulb text-2xl text-purple-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">理解Web开发</h3>
                            <p class="text-gray-600">了解什么是Web开发以及其在现代互联网应用中的重要性</p>
                        </div>
                    </div>
                </div>
                <div class="hover-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-start space-x-4">
                        <div class="bg-indigo-100 p-3 rounded-lg">
                            <i class="fas fa-tools text-2xl text-indigo-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">掌握核心技术</h3>
                            <p class="text-gray-600">掌握Web开发的基本概念、技术和工具</p>
                        </div>
                    </div>
                </div>
                <div class="hover-card p-6 rounded-xl shadow-lg">
                    <div class="flex items-start space-x-4">
                        <div class="bg-pink-100 p-3 rounded-lg">
                            <i class="fas fa-project-diagram text-2xl text-pink-600"></i>
                        </div>
                        <div>
                            <h3 class="font-semibold text-lg mb-2">熟悉工作流程</h3>
                            <p class="text-gray-600">理解Web开发的基本工作流程和相关术语</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 什么是Web开发 -->
    <section id="intro" class="py-16">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-4xl font-bold mb-6">什么是<span class="gradient-text">Web开发</span>？</h2>
                    <p class="text-lg text-gray-700 mb-6 drop-cap">
                        Web开发是指创建和维护互联网上的网站或Web应用程序的过程。它涉及使用各种技术和工具来设计、开发和部署网站，以及处理用户与网站之间的交互。Web开发通常涵盖前端开发、后端开发和数据库管理等方面。
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-check-circle text-green-500"></i>
                            <span class="text-gray-700">设计精美的用户界面</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-check-circle text-green-500"></i>
                            <span class="text-gray-700">构建强大的服务器端逻辑</span>
                        </div>
                        <div class="flex items-center space-x-3">
                            <i class="fas fa-check-circle text-green-500"></i>
                            <span class="text-gray-700">管理和优化数据存储</span>
                        </div>
                    </div>
                </div>
                <div class="image-overlay rounded-2xl overflow-hidden shadow-2xl">
                    <img src="https://cdn.nlark.com/yuque/0/2024/png/21449790/1707795280379-594dd7c1-4a2c-435e-b34f-21d6b7ecd502.png" alt="Web开发概览" class="w-full h-auto">
                </div>
            </div>
        </div>
    </section>

    <!-- Web开发组成部分 -->
    <section class="py-16 bg-gray-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <h2 class="text-4xl font-bold text-center mb-12">Web开发的<span class="gradient-text">核心组成</span></h2>
            
            <!-- 架构图 -->
            <div class="bg-white rounded-2xl shadow-xl p-8 mb-12">
                <div class="mermaid">
                    graph TB
                        A[Web应用程序] --> B[前端 Frontend]
                        A --> C[后端 Backend]
                        A --> D[数据库 Database]
                        B --> E[HTML/CSS/JS]
                        B --> F[框架: React/Vue/Angular]
                        C --> G[服务器端语言]
                        C --> H[API开发]
                        D --> I[关系型: MySQL/PostgreSQL]
                        D --> J[非关系型: MongoDB/Redis]
                        
                        style A fill:#f9f,stroke:#333,stroke-width:4px
                        style B fill:#bbf,stroke:#333,stroke-width:2px
                        style C fill:#bfb,stroke:#333,stroke-width:2px
                        style D fill:#fbb,stroke:#333,stroke-width:2px
                </div>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <div class="hover-card rounded-2xl p-8 text-center">
                    <div class="bg-gradient-to-br from-blue-400 to-blue-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-laptop-code text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">前端开发</h3>
                    <p class="text-gray-600">负责构建用户直接与之交互的界面，使用HTML、CSS和JavaScript等技术创建网页</p>
                </div>
                <div class="hover-card rounded-2xl p-8 text-center">
                    <div class="bg-gradient-to-br from-green-400 to-green-600 w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-6">
                        <i class="fas fa-server text-3xl text-white"></i>
                    </div>
                    <h3 class="text-2xl font-bold mb-4">后端开发</h3>
                    <p class="text-